<template>
    <div class="alert">
        <div class="top">
            <h3>{{ item.dissname }}</h3>
            <i class="iconfont" @click="setPublicAlertFlag(false)">&#xe625;</i>
            <img :src="img" alt="">
            <div>
                <i class="iconfont">&#xe720;</i>
                <span>随机播放全部</span>
            </div>
        </div>    
        <div class="con">
            <div
                v-for="(val, index) in alertlist"
                :key="index"
                @click="audioplay(val)"
            >
                <p>{{ index + 1 }}</p>
                <div>
                    <h3>{{ val.songname || val.musicData.songname }}</h3>
                    <p>
                        <span
                            v-for="item in val.singer"
                            :key="item.id"
                        >{{ item.name }}</span>
                        {{ val.musicData ? val.musicData.singer[0].name : val.albumname }}
                    </p>
                </div>
            </div>            
        </div>        
    </div>
</template>
<script>
import {    mapState, mapMutations } from 'vuex'
export default {
    computed: {
        ...mapState(['item', 'alertlist', 'img', 'audioIndex'])
    },
    methods: {
        ...mapMutations(['setPublicAlertFlag', 'getsings', 'getAudio', 'getaudioUrl', 'setaudioranFlag']),
        audioplay(item){
            let obj = {}
            obj.mid = item.songmid || item.musicData.songmid
            obj.name = item.songname || item.musicData.songname
            obj.title = item.albumname || item.musicData.singer[0].name
            obj.img = this.img
            obj.zan = false
            this.getsings(obj)
            this.getAudio()  
            this.setaudioranFlag(true)       
        }
    }
}
</script>

<style lang="scss" scoped>
.alert{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    background: #222;
}
.top{
    height: 262px;
    overflow: hidden;
    position: relative;
    >i.iconfont{
        position: absolute;
        font-size: 20px;
        color: #ffcd32;
        top: 10px;
        left: 10px;
    }
    h3{
        line-height: 40px;
        color: #fff;
        font-size: 18px;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        position: absolute;
    }
    >div{
        position: absolute;
        bottom: 20px;
        color:  #ffcd32;
        border: 1px solid  #ffcd32;
        height: 30px;
        padding: 0 15px;
        line-height: 28px;
        border-radius: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        i.iconfont{
            margin-right: 5px;
            vertical-align: middle;
        }
    }
}
img{
    width: 100%;
}
.con{
    overflow-y: scroll;
    flex: 1;
    >div{  
        display: flex;
        align-items: center;
        padding: 10px 0;
        color:  hsla(0,0%,100%,.3);
        >p{
            width: 80px;
            text-align: center;
            font-size: 20px;
            color: #ffcd32;
        }
        h3{
            color: #fff;
            line-height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        div {
            flex: 1;
            overflow: hidden;
            padding-right: 20px;
            p{
                width: 100%;
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>